<template>
  <div class="comment-card-wrapper">
    <h2 class="title">评论</h2>

    <div class="write-comment clearfix">
      <div class="avatar-wrapper">
        <img :src="userAvatarUrl" alt="avatar" />
      </div>
      <text-area
        class="comment-input"
        v-model:value="commentContent"
        :maxlength="500"
      ></text-area>
    </div>

    <div class="submit-wrapper">
      <button class="submit-comment" @click="submitComment">评论</button>
    </div>

    <ul class="comment-list">
      <li v-for="(comment, idx) in comments" :key="idx">
        <CommentItem
          :comment="comment"
          :contentType="contentType"
        ></CommentItem>
      </li>
      <li ref="commentLoading"></li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import TextArea from '@/components/utils/Input/TextArea.vue'
import CommentItem from './CommentItem.vue'
import { ref, computed } from 'vue'
import { UserStateLogin, useUserStore } from '@/store/user'
import config from '@/config'
import { useRouter } from 'vue-router'

const props = defineProps<{
  comments: App.Comment[]
  contentType: string
}>()
const emit = defineEmits<{
  (e: 'submitComment', value: string): void
}>()

const commentContent = ref('')

const userStore = useUserStore()
const userState = userStore.$state as UserStateLogin
let userInfos = computed(() => {
  return userState.info
})

let userAvatarUrl = computed(() => {
  return userInfos.value?.avatar
    ? config.baseURL + userInfos.value.avatar
    : config.baseURL + config.defaultAssetUrls
})

function submitComment() {
  if (commentContent.value === '') return
  emit('submitComment', commentContent.value)
  commentContent.value = ''
}

const router = useRouter()
function routeToAuthor(author_id: string) {
  router.push(`/author/${author_id}/profile`)
}

// TODO: Scrollload
// onMounted(() => {
//   this.$scrollLoad({
//     loadingComponent: this.$refs.commentLoading,
//     callback: (entries) => {
//       let entry = entries[0]
//       if (entry.isIntersecting) {
//         this.$emit('fetchComments')
//       }
//     },
//   })
// })
</script>

<style lang="scss" scoped>
$w: var(--commentCardWidth);

.comment-card-wrapper {
  box-sizing: border-box;
  width: $w;
  min-height: 200px;
  background-color: white;
  padding: calc($w / 40) calc($w / 20);
  font-size: calc($w * 0.03);

  .write-comment {
    --a: calc($w * 0.06);

    margin: calc($w * 0.02) 0;

    display: flex;
    justify-content: space-between;

    .avatar-wrapper {
      width: calc($w * 0.1);

      img {
        display: block;

        width: var(--a);
        height: var(--a);
        border-radius: 50%;
      }
    }

    .comment-input {
      --textAreaWidth: calc($w * 0.8);
      --textAreaHeight: 100px;
    }
  }

  .submit-wrapper {
    text-align: right;
    border-bottom: 1px solid var(--light);

    .submit-comment {
      --w: $w;
      --fs: calc(var(--w) * 0.025);
      margin-bottom: var(--fs);
      width: calc(var(--fs) * 6);
      height: calc(var(--fs) * 2);
      border-radius: calc(var(--fs) * 0.4);
      line-height: 1.5;
      font-size: var(--fs);
      background-color: var(--blue);
      color: white;

      &:hover {
        background-color: var(--darkBlue);
      }
    }
  }

  .comment-list {
    li:not(:last-child) {
      --commentItemWidth: $w;
    }
  }
}
</style>
